<template>
  <div id="main">
    <code-diff :old-string="taskContent" :new-string="taskResult" :context="10"  :outputFormat="outputFormat" :isShowNoChange="true" />
    <div>
      <textarea v-model="taskContent" style="width: 100%;" ></textarea>
      <el-button @click="doCheck()">提交</el-button>
    </div>
  </div>
</template>

<script>
import CodeDiff from 'vue-code-diff'
export default {
  name: 'word',
  components: {
    CodeDiff
  },
  data () {
    return {
      taskId: '',
      taskContent: '',
      taskResult: '',
      timer: '',
      outputFormat: 'side-by-side'
    }
  },
  mounted () {
    this.initUI()
  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
  methods: {
    initUI () {
      this.taskContent = '源文件'
      this.taskResult = 'ai纠错后的文件'
    },
    doCheck () {
      this.addWord()
    },
    // Vue.localStorage.set('someNumber', 123)
    // Vue.localStorage.get('someNumber')
    addWord () {
      let that = this
      that.$localStorage.set('wordId', '')
      let params = {
        taskContent: this.taskContent
      }
      that.$api.addWord(params).then(res => {
        console.log(res)
        if (res.data.code === 200) {
          debugger
          that.taskResult = '正在等待处理结果，请稍后。。。'
          that.$localStorage.set('wordId', res.data.data.wordId)
          this.timer = setInterval(() => { that.findById() }, 1000)
        } else {
          console.log(res.data)
        }
      }).catch(error => {
        console.log(error)
      })
    },
    findById () {
      let that = this
      console.log(this.$localStorage.get('wordId'))
      let wordId = this.$localStorage.get('wordId')
      if (!wordId) {
        return
      }
      let request = {
        params: {
          id: wordId
        }
      }
      that.$api.findWordById(request).then(res => {
        console.log(res)
        if (res.data.code === 200) {
          debugger
          that.taskResult = res.data.data.wordResult
          clearInterval(that.timer)
        } else {
          console.log(res.data)
        }
      }).catch(error => {
        console.log(error)
      })
    }
  }
}

//1440271332234367000
//1440271332234366976
//=============
//1440271846883856400
//1440271846883856384
</script>

<style scoped>
  .d2h-info{
    display: none;
  }

</style>
